<template>
  <div class="container" >
    <el-row class="comments" :gutter="40">
      <el-col type="flex" style="width: 340px;margin-bottom: 40px" v-for="item in comments" :key="item" >
        <el-card class="comment" :body-style="{ padding: '0px'}">
          <div slot="header" class="userInfo">
            <el-avatar :src="item.Avatar" style="float: left; height: 50px;width: 50px"></el-avatar>
            <div class="username" style="padding-top: 4px; padding-left: 70px; font-size: 25px">{{
                item.username
              }}
            </div>
            <div class="date" style="padding-left: 70px">{{ item.date }}</div>
          </div>
          <div class="commentBody" style="width: 350px; padding: 20px">
            {{ item.content }}
          </div>

          <el-button icon="el-icon-arrow-up" circle @click="like(item)" :disabled="item.isUnLike">
            {{ item.likeNum }}
          </el-button>
          <el-button icon="el-icon-arrow-down" circle @click="unlike(item)" :disabled="item.isLike">
            {{ item.unlikeNum }}
          </el-button>
        </el-card>
      </el-col>


    </el-row>
  </div>
</template>

<script>
import {like, unlike} from "@/api/comment";

export default {
  props: {
    comments: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      inputComment: '',
      showItemId: '',
    }
  },
  computed: {},
  methods: {
    like(item) {
      this.likeLoading = true;
      like(item.id).then(response => {
        let code = response.data.code;
        if (code == 200) {

          if (isNaN(item.likeNum)) {
            this.$set(item, "likeNum", 0)
          }
          if (item.isLike === null) {
            this.$set(item, "isLike", true);
            item.likeNum++
          } else {
            if (item.isLike) {
              item.likeNum--
            } else {
              item.likeNum++
            }
            item.isLike = !item.isLike;
          }
        } else {
          this.$alert("操作失败")
        }
        this.likeLoading = false;
      })

    },
    unlike(item) {
      this.unlikeLoading = true;
      unlike(item.id).then(response => {
        let code = response.data.code;
        if (code == 200) {

          if (isNaN(item.unlikeNum)) {
            this.$set(item, "unlikeNum", 0)
          }
          if (item.isUnLike === null) {
            this.$set(item, "isUnLike", true);
            item.unlikeNum++
          } else {
            if (item.isUnLike) {
              item.unlikeNum--
            } else {
              item.unlikeNum++
            }
            item.isUnLike = !item.isUnLike;
          }
        } else {
          this.$alert("操作失败")
        }
        this.unlikeLoading = false;
      })
    }
  },
}
</script>

<style scoped>
.comments {
  background-color: #696969;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.comment {
  min-width: 100%;
  height: 100%;
margin-right: 20px;
  transition: all .5s;
}
</style>